<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <h3>学习vue模板语法</h3>
    <div>{{ rawHtml }}</div>
    
    <div v-html="rawHtml"></div>
    <!-- 属性动态化 -->
    <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>  

    <p>{{ num+10 }}</p>
    <p>{{ flag ? "true" : "false" }}</p>

    <!-- 条件渲染 -->
    <p v-if="flag">根据if条件显示</p>
    <p v-else>根据else条件显示</p>
    <p v-show="flag">根据show条件显示</p>

   <!-- 列表渲染 -->
   <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
   
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"测试",
      rawHtml:"<a href='http://www.baidu.com'>百度</a>",
      dynamicId:10001,
      num:10,
      flag:true,
      items:[
        {
          id:1001,
          title:"新闻1"
        },
        {
          id:1002,
          title:"新闻2"
        },
        {
          id:1003,
          title:"新闻3"
        },
       ]
    }
  }
}
</script>

